<!--
 * @Author: your name
 * @Date: 2021-02-08 21:25:30
 * @LastEditTime: 2021-04-03 23:30:05
 * @LastEditors: Please set LastEditors
 * @Description: 三级目录
 * @FilePath: \jf-h5\src\page\three-page\index.vue
-->
<template>
  <div class="three-page">
    <div class="back" @click="back"></div>
    <van-loading v-if="loading" size="28" color="#0094ff" />
    <div v-else class="line-list">
      <line-text
        size="big"
        v-for="item in menu"
        :key="item.id"
        @click="toDetail(item)"
        >{{ item.class_name || item.code_name }}</line-text
      >
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menu: [],
      loading: true,
      isUrl: false
    };
  },
  created() {
    this.judgeGetApi();
  },
  methods: {
    // 返回
    back() {
      const { cid, table_name } = this.$route.query;
      if (table_name == "gong_cheng_guan_li_son" && cid == "1") {
        this.$router.push("/main/gcgl");
        return;
      }
      this.$router.go(-1);
    },
    // 去详情页
    async toDetail(item) {
      const { cid, table_name, isUrl } = this.$route.query;
      if (isUrl) {
        //跳转url
        const {
          data: { results }
        } = await this.$api.realTime.getUrl({ id: item.id });

        window.location.href = results[results.length - 1].url;
        return;
      }
      if (table_name == "gong_cheng_guan_li_son" && cid == "1") {
        window.location.href = "/#/project?id=" + item.id;
      } else {
        this.$router.push({
          path: "/detail",
          query: { ...item, ...this.$route.query }
        });
      }
    },
    //更具需求判断获取哪个api
    async judgeGetApi() {
      const { cid, table_name, isUrl } = this.$route.query;
      if (isUrl) {
        this.isUrl = true;
        //去url菜单
        const { data } = await this.$api.realTime.getMenu({ id: cid });
        // this.menu = data.reverse();
        this.menu = data
        this.loading = false;
        return;
      }
      if (table_name == "gong_cheng_guan_li_son" && cid == "1") {
        this.getProjectList();
      } else {
        this.getMenu(); //获取通用三级菜单列表
      }
    },
    //获取工程目录列表
    async getProjectList() {
      this.loading = true;
      const {
        data: { results },
        code
      } = await this.$api.project_code.codeByid();
      if (!code) {
        this.loading = false;
        this.menu = results;
      }
    },
    // 获取三级菜单
    async getMenu() {
      this.loading = true;
      const { data, code } = await this.$api.menu.getMenu(this.$route.query);
      if (!code) {
        this.menu = data;
        this.loading = false;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.three-page {
  height: 100%;
  overflow: hidden;
  .van-loading {
    text-align: center;
  }
  .back {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    background: url("/static/img/home/back.png") no-repeat center;
    background-size: 100%;
    // box-shadow: 0 5px 10px #474446;
    height: 35px;
    border-radius: 10px;
    // background-color: #1874b3;
    margin-top: 30px;
    margin-left: 30px;
    font-size: 30px;
    letter-spacing: 5px;
    .icon-jiantou {
      width: 13px;
    }
  }
  .line-list {
    overflow: auto;
    margin-top: 50px;
    padding-bottom: 50px;
    height: 82%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .line-text {
      margin-top: 50px;
      flex-shrink: 0;
      &:first-child {
        margin-top: 0px;
      }
    }
  }
}
</style>
